<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
    <meta http-equiv="content-type" content="text/html; charset=windows-1250">
    <meta name="generator" content="PSPad editor, www.pspad.com">
    <title></title>
    <style type="text/css">
      body
      {
        background:#434343;
        color:silver;
        font: normal 1em Arial, Verdana;
      }   
    </style>   
   <script src="js/mootools-1.2-core.js" type="text/javascript" ></script>             
   <script src="js/mootools-1.2-more.js" type="text/javascript" ></script>
  </head>
  <body>

  <style type="text/css">
    .container
    {
      position:relative;
      background:#303050;
      top:100px;
      left:100px;
      width:100%;
      height:400px;      
    }
    
  </style>
  
    <div class="container" id="container">
      <div class="drop" id="drop1" style="position: absolute; top: 250px; left:  50px; width:150px; height: 150px; background:#403030;"></div>
      <div class="drop" id="drop2" style="position: absolute; top: 250px; left: 300px; width:150px; height: 150px; background:#303030;"></div>
      <div class="drop" id="drop3" style="position: absolute; top: 250px; left: 550px; width:150px; height: 150px; background:#203030;"></div>
      <div id="dragme" style="position: absolute; top: 100px; left: 100px; width:100px; height: 100px; background:#305030;">
         drag-me
      </div>
    </div>

    </div>
    <div id="container" style="position:absolute; background:#303050; top:100px; left:100px; width:800px; height:400px;">
      <div class="drop" id="drop1" style="position: absolute; top: 250px; left:  50px; width:150px; height: 150px; background:#403030;"></div>
      <div class="drop" id="drop2" style="position: absolute; top: 250px; left: 300px; width:150px; height: 150px; background:#303030;"></div>
      <div class="drop" id="drop3" style="position: absolute; top: 250px; left: 550px; width:150px; height: 150px; background:#203030;"></div>
      <div id="dragme" style="position: absolute; top: 100px; left: 100px; width:100px; height: 100px; background:#305030;">
         drag-me
      </div>
    </div>
   
   <script type="text/javascript" >

     function init()
     {
        var e = document.getElementById('contentpanel');
        var el = $('contentpanel');
        if (el)
        {
          el.innerHTML = 'content changed';
          el.addEvent('click',mooclick);
        }
        $('dragme').makeDraggable(
        {
          container: 'container',
          droppables: '.drop',
          onEnter: function (element, droppable)
          {
            droppable.set('text','Drop hier');
            droppable.wb_background = droppable.getStyle('backgroundColor');
            droppable.setStyle('backgroundColor','red');
          },
          onLeave: function (element, droppable)
          {
            droppable.set('text','');
            droppable.setStyle('backgroundColor',droppable.wb_background);
          },
          onDrop: function (element, droppable)
          {
            if (droppable)
            {
              droppable.set('text','YEAH');
            }
          }
        });
      }
      init();
    </script>           
  </body>
</html>
